<template>
	<view  style="padding-bottom: 60px;">
		<!-- {{width}} -->
		<!-- <image src="http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg"></image> -->
		<!-- <canvas :style="{width:width+'px', height:height+'px'}" canvas-id="firstCanvas" id="firstCanvas"></canvas> -->
		
		<view style="width: auto;height: auto;overflow: scroll;" v-if="detail.y">
					 <view class="imgOut" style="width: 200vw;height: 200vh;"
					 @click="tag"
					 >
						 <image src="http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg"
						 mode="" style="width: 200vw;height: 200vh;"></image>
						  <view class="tag"
						  :style="{'top': detail.y.indexOf('-') !== -1 ? detail.y.split('-')[0] + 'px' : detail.y + 'px', 
						  'left': detail.x.indexOf('-') !== -1 ? detail.x.split('-')[0] + 'px' : detail.x + 'px'}"
						  >
							<view class="title">{{detail.name}}</view>
							<view class="liang">挂锁量：{{detail.lock}}</view>
						  </view>
						  <view class="blue" 
						  v-if="i.type === 1"
							v-for="i in detail.mountains_detail"
						   :style="{'top': i.y.indexOf('-') !== -1 ? i.y.split('-')[0] + 'px' : i.y + 'px',
						   'left': i.x.indexOf('-') !== -1 ? i.x.split('-')[0] + 'px' : i.x + 'px'}"
						   :key="i.id"
						   :class="i.is_self === 1 ? 'myTag' : ''"
						   >
						  </view>
						  <view class="orange"
						  v-if="i.type === 0 && i.sex === 0"
						  	v-for="i in detail.mountains_detail"
						   :style="{'top': i.y.indexOf('-') !== -1 ? i.y.split('-')[0] + 'px' : i.y + 'px',
						   'left': i.x.indexOf('-') !== -1 ? i.x.split('-')[0] + 'px' : i.x + 'px'}"
						   :key="i.id"
						    :class="i.is_self === 1 ? 'myTag' : ''"
							@click.stop="showInfo(i)"
						   >
						  </view>
						  <view class="yaoshi"
						  v-if="i.type === 0 && i.sex === 1"
						  	v-for="i in detail.mountains_detail"
						   :style="{'top': i.y.indexOf('-') !== -1 ? i.y.split('-')[0] + 'px' : i.y + 'px',
						   'left': i.x.indexOf('-') !== -1 ? i.x.split('-')[0] + 'px' : i.x + 'px'}"
						   :key="i.id"
						    :class="i.is_self === 1 ? 'myTag' : ''"
							@click.stop="showInfo(i)"
						   >
						  </view>
					 </view>
					  
					 
		 </view>
			
		
		<articleList v-if="detail.push" :list="detail.push"></articleList>
		
		<view style="position: fixed; display: flex; z-index: 1; bottom: 0; left: 0; width: 100%; height: 50px; background: #68C0AD;">
			<view style="width: 50%; text-align: center; margin: auto; box-sizing: border-box; padding:0 20px;">
				<u-button @click="xuyuan" size="medium" type="warning">许愿</u-button>
			</view>
			<view style="width: 50%; text-align: center; margin: auto; box-sizing: border-box; padding:0 20px;">
				<u-button size="medium" type="warning" @click="xunyuans()">寻缘</u-button>
			</view>
		</view>
		<u-modal v-model="show" 
		:title="title" :content="content" :showCancelButton="true"
		@confirm="xunyuanOrder"
		></u-modal>
		<view class="tagOut"
		v-if="showTag"
		:style="{'top': tagTop + 'px', 'left': tagLeft + 'px'}">
			<view class="userRow">
				<image :src="user.avatar" mode="" class="avatar"></image>
				<text>{{user.nickname}}</text>
				<image src="../../static/images/wish/sex.png" mode="" class="sexIcon" 
				v-if="user.gender === 0"></image>
			</view>
			<view class="jiesuo">
				<image src="../../static/images/wish/glayyaoshi.png" mode="" class="yaosi"></image>
				<view class="userRight">请用权益解锁</view>
				<view class="jieRouk" @click="jiesuo()" v-if="currentTag.is_unlock === 0">解锁</view>
			</view>
			<view class="gn">
				<view class="gnIn" @click="chat()">聊一聊</view>
				<view class="gnIn" @click="lookInfo()">看情况</view>
			</view>
		</view>
	</view>
</template>

<script>
	import articleList from '@/components/article/list.vue';
	import {mountainDetail, xunyuan, userInfo, jsQy} from './request.js'
	export default {
		components: {
			articleList,
		},
		data() {
			return {
				width:0,
				height:0,
				list:[],
				id: '',
				x: 0,
				y: 0,
				detail: {},
				xuyuans: false,
				xunyuan: false,
				show: false,
				title: '寻缘',
				content: '',
				clickX: 0,
				clickY: 0,
				tagTop: 0,
				tagLeft: 0,
				showTag: false,
				user: {},
				background: {
					backgroundColor: 'rgba(244,160,99,1)',
				},
				currentTag: {}
			}
		},
		onReady() {
			// let w_h=new Promise((r,n)=>{
			// 	uni.getImageInfo({
			// 	        src: "https://p0.ssl.qhimgs1.com/sdr/400__/t0154338114a1484a4e.jpg",
			// 	        success: (res) => {
			// 	          // resolve(res);
			// 			  console.log(res)
			// 	        },
			// 	        fail: (err) => {
			// 	          // reject(err);
			// 	        }
			// 	});
			// })
			const ctx = uni.createCanvasContext('firstCanvas',this)
			uni.getImageInfo({
				src:'http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg',
				success:(e)=>{
					console.log(e.width,e.height,'22222222222222')
					console.log(e,'计算宽高比例')
					this.width=e.width
					this.height=e.height
					// 计算宽高比例
					// that.ratio=data[0]/e.width
					// console.log(that.ratio)
					ctx.drawImage(e.path,0,0,e.width,e.height)
					
					ctx.draw(true)		
				},
				fail(err){
					console.log(err)
				}
			})
		},
		mounted() {
			
		},
		onShow() {
			this.width = uni.getSystemInfoSync().screenWidth
			this.height = uni.getSystemInfoSync().screenHeight
			this.xunyuan = false
			this.xuyuans = false
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		onNavigationBarButtonTap() {
			this.tipMap()
		},
		methods: {
			// 跳转第三方地图
			//打开第三方地图
			tipMap(latitude, longitude, name) {
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								url =
									`baidumap://map/marker?title=${this.detail.name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 2:
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [ {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url =
									`baidumap://map/marker?title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 2:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			},
			

			// 许愿
			xuyuan(){
				this.xuyuans = true
				this.xunyuan = false
				uni.showToast({
					title: '请在图中选择要挂锁的位置',
					icon: 'none',
					duration: 2000
				})
			},
			// 点击整个山地
			tag (e) {
				console.log(e)
				if (this.xuyuans) {
					uni.navigateTo({
						url:`./xunyuan?id=${this.id}&x=${e.detail.x}&y=${e.detail.y}`
					})
				}
				if (this.xunyuan) {
					this.clickX = e.detail.x
					this.clickY = e.detail.y
					let data = {
						user_id: uni.getStorageSync('userdata').id
					}
					userInfo(data).then(res => {
						console.log(res)
						if (res.data.code === 1) {
							this.show = true
							this.content = `权益：剩余${res.data.data.rights}\n是否进行寻缘？`
						}
					})
					
				}
				this.showTag = false
			},
			// 获取山地详情
			getDetail () {
				
				mountainDetail(this.id).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.detail = res.data.data
					}
				})
			},
			// 寻缘提示
			xunyuans () {
				this.xunyuan = true
				this.xuyuans = false
				uni.showToast({
					title: '请在图中选择要挂锁的位置',
					icon: 'none',
					duration: 2000
				})
			},
			// 寻缘
			xunyuanOrder () {
				let params = {
					mountains_id: this.id,
					x: this.clickX,
					y: this.clickY,
					screen_size: `${this.width}-${this.height}`
				}
				xunyuan(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						uni.showToast({
							title: '寻缘成功！',
							icon: 'success',
							duration: 2000
						})
						this.getDetail()
					}
				})
			},
			// 展示点击详情的弹窗
			showInfo (obj) {
				this.currentTag = obj
				if (obj.is_self === 1) {
					this.tagTop = obj.y - 100
					this.tagLeft = obj.x
				} else {
					this.tagTop = obj.y - 95
					this.tagLeft = obj.x
					this.showTag = true
				}
				let params = {
					user_id: obj.user_id
				}
				userInfo(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.user = res.data.data
					}
				})
			},
			// 聊一聊
			chat () {
				if (this.currentTag.is_unlock === 1) {
					console.log('进入')
					uni.navigateTo({
						url: `/pages/TUI-Chat/chat?conversationID=C2C${this.user.id}`
					})
				} else {
					uni.showToast({
						title: '请先解锁！',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 看情况
			lookInfo () {
				if (this.currentTag.is_unlock === 1) {
					console.log('进入')
					uni.navigateTo({
						url: `/pages/user/info?uid=${this.user.id}`
					})
				} else {
					uni.showToast({
						title: '请先解锁！',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 解锁权益
			jiesuo () {
				let params = {
					uid: this.currentTag.user_id
				}
				jsQy(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						uni.showToast({
							title: '解锁成功！',
							icon: 'success',
							duration: 2000
						})
						let params = {
							user_id: this.currentTag.user_id
						}
						userInfo(params).then(res => {
							console.log(res)
							if (res.data.code === 1) {
								this.user = res.data.data
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
			// click(e){
			// 	uni.navigateTo({
			// 		url:'./wishDetail'
			// 	})
			// }
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
.imgOut{
	position: relative;
}
.tag{
	position: absolute;
	width: 293rpx;
	min-height: 163rpx;
	z-index: 99;
	color: #FA9700;
	font-size: 30rpx;
	background-color: rgba(250, 250, 250, 0.65);
	text-align: center;
	border-radius: 20rpx;
}
.title{
	color: #FA9700;
	font-size: 36rpx;
	line-height: 82rpx;
}
.liang{
	color: #FA9700;
	font-size: 30rpx;
}
.suoTag{
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #FA6000;
}
.blue{
	position: absolute;
	width: 68rpx;
	height: 90rpx;
	background: url(../../static/images/wish/blue.png) no-repeat;
	background-size: 100% 100%;
}
.orange{
	position: absolute;
	width: 68rpx;
	height: 90rpx;
	background: url(../../static/images/wish/orange.png) no-repeat;
	background-size: 100% 100%;
}
.yaoshi{
	position: absolute;
	width: 68rpx;
	height: 90rpx;
	background: url(../../static/images/wish/yaoshi.png) no-repeat;
	background-size: 100% 100%;
}
.myTag{
	width: 88rpx;
	height: 110rpx;
}

.tagOut{
	width: 284rpx;
	height: 172rpx;
	position: absolute;
	top: 100px;
	left: 100px;
	background: url(../../static/images/wish/bg.png) no-repeat;
	background-size: 284rpx 172rpx;
}
.userRow{
	margin-top: 15rpx;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.avatar{
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	margin-left: 28rpx;
	margin-right: 10rpx;
}
.sexIcon{
	width: 17rpx;
	height: 20rpx;
	margin-left: 10rpx;
}
.jiesuo{
	margin-top: 10rpx;
	font-size: 22rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	color: #666666;
}
.yaosi{
	width: 24rpx;
	height: 22rpx;
	margin-left: 20rpx;
	margin-right: 6rpx;
}
.jieRouk{
	width: 74rpx;
	height: 34rpx;
	background: #FA9700;
	color: #FFFFFF;
	border-radius: 17rpx;
	font-size: 24rpx;
	text-align: center;
	line-height: 34rpx;
	margin-left: 16rpx;
}
.gn{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 16rpx;
	color: #FA9700;
	font-size: 22rpx;
}
.gnIn{
	width: 50%;
	text-align: center;
}
</style>
